import React, { Component } from 'react';
import { connect } from 'react-redux';
import Panel from 'bootstrap/Panel';
import Button from 'bootstrap/Button';
import * as actions from '../../actions/subredditAction';

import Picker from '../../components/subreddit/Picker';
import Posts from '../../components/subreddit/Posts';
import { formatDate } from 'idiv-utils';

class AsyncApp extends Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleRefreshClick = this.handleRefreshClick.bind(this);
    }

    componentDidMount() {
        const { dispatch, selectedSubreddit } = this.props;
        dispatch(actions.fetchPostsIfNeeded(selectedSubreddit));
    }

    componentWillReceiveProps(nextProps) {
        if(nextProps.selectedSubreddit !== this.props.selectedSubreddit) {
            const { dispatch, selectedSubreddit } = nextProps;
            dispatch(actions.fetchPostsIfNeeded(selectedSubreddit))
        }
    }

    handleChange(nextSubreddit) {
        this.props.dispatch(actions.selectSubreddit(nextSubreddit));
    }

    handleRefreshClick(e) {
        e.preventDefault();
        const { dispatch, selectedSubreddit } = this.props;
        dispatch(actions.invalidateSubreddit(selectedSubreddit));
        dispatch(actions.fetchPostsIfNeeded(selectedSubreddit));
    }

    render() {
        const {
            selectedSubreddit,
            posts,
            isFetching,
            lastUpdated
        } = this.props;
        return (
            <div className="subreddit">
                <Picker
                    value={ selectedSubreddit }
                    onChange={ this.handleChange }
                    options={ ['reactjs', 'frontend'] }
                />
                <Panel>
                {
                    lastUpdated && 
                    <span>
                        最后更新: { formatDate(lastUpdated) }
                    </span>
                }
                {
                    !isFetching && 
                    <Button bsStyle="success" onClick={ this.handleRefreshClick }>刷新</Button>
                }
                {
                    isFetching && posts.length === 0 &&
                    <h2>加载中。。。。。。</h2>
                }
                {
                    !isFetching && posts.length === 0 &&
                    <h2>暂无数据</h2>
                }
                </Panel>
                <div className="text">
                {
                    posts.length > 0 &&
                    <div style={{ opacity: isFetching ? '.5' : '1' }}>
                        <Posts posts={ posts }></Posts>
                    </div>
                }
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => {
    const { selectedSubreddit, postsBySubreddit } = state;
    const {
        isFetching,
        lastUpdated,
        items: posts
    } = postsBySubreddit[selectedSubreddit] || {
        isFetching: true,
        items: []
    };
    return {
        selectedSubreddit,
        posts,
        isFetching,
        lastUpdated
    };
};

// const mapDispatchToProps = (dispatch, state) => {
//     return {
//         fetchPostsIfNeeded: bindActionCreators(actions.fetchPostsIfNeeded, dispatch)
//     };
// };

export default connect(mapStateToProps)(AsyncApp);